<template>
	<view class="homestay-detail-page">
		<view class="top"></view>
		<view class="price-box">
			<view class="price-row">
				<view class="current-price">￥{{detail.price}}</view>
				<view class="origin-price"> /晚 <text class="origin-text">￥{{detail.originPrice}} </text></view>
			</view>
			<view class="preferential-row">
				<view class="left">
					<view class="preferential-text">{{detail.preferentialText}}</view>
					<view class="topic-text">{{detail.topic}}</view>
				</view>
				<view class="right">
					优惠明细 >
				</view>
			</view>
		</view>
		<view class="introduce-box">
			<view class="title-text">{{detail.title}}</view>
			<view class="general-introduce">{{detail.introduce}}</view>
			<view class="tag-list">
				<view class="tag-item" v-for="(tagItem, tagIndex) in detail.tags" :key="tagIndex">{{tagItem}}</view>
			</view>
			<view class="access-list">
				<view class="group">
					<view class="access-item" v-for="(accessItem, accessIndex) in detail.access" :key="accessIndex">
						<image class="access-icon"></image>
						<text class="access-text">{{accessItem}}</text>
					</view>
				</view>
				<view class="arrow">></view>
			</view>
			<view class="comment-row">
				<view class="left">
					<view class="score">{{detail.score}}<text class="unit-text">分</text></view>
					<view class="comment-text">{{detail.commentText}}</view>
				</view>
				<view class="right">
					{{detail.commentsNum || 0}}条评论
				</view>
			</view>
			<view class="address-box">
				<view class='left'>
					<view class="address-text">{{detail.address}}</view>
					<view class="walk-distance">距您{{detail.distace.line}}m，步行约{{detail.distace.walkTime}}min</view>
					<view class="subway-distance">距平泷路东地铁站{{detail.distace.subwayNum}}m，步行约{{detail.distace.subwayTime}}min</view>
				</view>
				<view class='right'>
					地图/周边
				</view>
			</view>
		</view>
		<view class="overview-box">
			<view class="title">房屋概览</view>
			<view class="item-group">
				<view class="item-box">
					<image class="icon"></image>
					<view class="info">
						<view class="main">整套房源{{detail.overview.area}}㎡</view>
						<view class="sub"></view>
					</view>
				</view>
				<view class="item-box">
					<image class="icon"></image>
					<view class="info">
						<view class="main">{{detail.overview.layout}}</view>
						<view class="sub">{{detail.overview.subLayout}}</view>
					</view>
				</view>
				<view class="item-box">
					<image class="icon"></image>
					<view class="info">
						<view class="main">{{detail.overview.bedNum}}床</view>
						<view class="sub">{{detail.overview.bedDesc}}</view>
					</view>
				</view>
				<view class="item-box">
					<image class="icon"></image>
					<view class="info">
						<view class="main">{{detail.overview.userNum}}人</view>
						<view class="sub">{{detail.overview.userDesc}}</view>
					</view>
				</view>
			</view>
			<view class="introduce">
				<view class="info-box">
					<view class="label">介绍</view>
					<view class="value"></view>
				</view>
				<view class="show-more">查看更多</view>
			</view>
			
		</view>
	
		<view class="facilities-box">
			<view class="title-row">
				<view class="title-text">服务设施</view>
				<view class="show-more">项服务设施</view>
			</view>
		</view>
		
		
		<view class="comment-box">
			<view class="title-row">
				<view class="title-text">客房评价</view>
				<view class="show-more">条真实评价</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {
					price: 180,
					originPrice: 298,
					preferentialText: '已优惠  ¥118 ·天天特价',
					topic: '爆款房源',
					title: '独享整套房源·1室1床·可住2人',
					introduce: '一城一迹泛娱乐民宿 火车站/万达广场/平江月/虎丘 景点民宿/地铁口/出行 方便|大飘窗|带浴缸|可K歌|私人影院一城一迹泛娱乐民宿 火车站/万达广场/平江月/虎丘 景点民宿/地铁口/出行 方便|大飘窗|带浴缸|可K歌|私人影院',
					tags: ['白金房东', '平台严选', '适合情侣', '允许宠物'],
					access: ['立即确认', '15分钟内免费取消'],
					commentTitle: '超赞“服务超好”',
					score: 4.8,
					commentsNum: 988,
					address: '火车站·姑苏区苏锦街道万达社区',
					distace: {
						line: 888,
						walkTime: 11,
						subwayNum: 999,
						subwayTime: 6
					},
					overview:{
						area: 40,
						layout:'1室·1厅·1厨·1卫',
						subLayout:'有窗户，有电梯，1独卫',
						bedNum: 1,
						bedDesc: '1张 1.5*2米双人床',
						userNum: 2,
						userDesc: '可加客',
						introduce: '游友，您好，我们主营新潮楼房源，可K歌，可轰趴 可做饭，无接触自助入住。24小时服务...'
					},
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homestay-detail-page {
		.top {
			height: 525rpx;
			background-color: #000;
		}

		.price-box {
			background-color: #fff;
			position: relative;
			top: -42rpx;
			border-radius: 50rpx 50rpx 0rpx 0rpx;
			padding: 42rpx 36rpx 24rpx 36rpx;
			margin-bottom: 20rpx;

			.price-row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.current-price {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;
				}

				.origin-price {
					font-size: 23rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					text-decoration: line-through;
					color: #666668;
				}
			}

			.preferential-row {
				margin-top: 23rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;

					.preferential-text {
						background: #FF2F2F;
						border-radius: 5rpx;
						padding: 12rpx 15rpx;
						margin-right: 10rpx;
					}

					.topic-text {
						background: #FF2F2F;
						border-radius: 5rpx;
						padding: 12rpx 15rpx;
						margin-right: 10rpx;
					}

					.preferential-text {
						background: #FF2F2F;
						border-radius: 5rpx;
						padding: 12rpx 15rpx;
						margin-right: 10rpx;
					}
				}

				.right {
					font-size: 24rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #173CF5;
				}
			}
		}

		.introduce-box {
			background-color: #fff;
			padding: 30rpx 40rpx;
			margin-bottom: 20rpx;
			.title-text {
				font-size: 32rpx;
				font-family: FZLTZHK;
				font-weight: normal;
				color: #000000;
				margin-bottom: 18rpx;
			}

			.general-introduce {
				font-size: 20rpx;
				font-family: FZLTXHK;
				font-weight: normal;
				color: #666668;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-bottom: 16rpx;
			}

			.tag-list {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 13rpx;

				.tag-item {
					height: 37rpx;
					line-height: 37rpx;
					background: #F8FAFF;
					border-radius: 5rpx;
					padding: 0rpx 16rpx;
					font-size: 20rpx;
					font-family: FZLTXHK;
					font-weight: normal;
					color: #737B93;
					margin-right: 6rpx;
				}
			}
			
			.access-list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 87rpx;
				padding: 0rpx 20rpx;
				background: #F8FAFF;
				border-radius: 10rpx;
			
				.arrow {
					color: #A2CDF5;
			
				}
			
				.group {
					width: calc(100% - 20rpx);
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-right: 10rpx;
			
					.access-icon {
						width: 20rpx;
						height: 15rpx;
						margin-right: 7rpx;
			
					}
			
					.access-text {
						font-size: 22rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #737B93;
					}
				}
			
			}
				
			
			.comment-row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0rpx;
				.left {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					.score {
						font-size: 32rpx;
						font-family: FZLTZHK;
						font-weight: normal;
						color: #000000;
						.unit-text {
							font-size: 24rpx;
							font-family: FZLTZHK;
							font-weight: normal;
							color: #000000;
						}
					}
					.comment-text {
						font-size: 24rpx;
						font-family: FZLTZHK;
						font-weight: normal;
						color: #000000;
					}
				}
				.right {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					font-size: 20rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #3299EF;
				}
			}
			
			
			.address-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				padding: 20rpx 0rpx;
				.left {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					.address-text {
						font-size: 26rpx;
						font-family: FZLTZHK;
						font-weight: normal;
						color: #000000;
						margin-bottom: 20rpx;
					}
					.walk-distance {
						font-size: 22rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #828284;
						margin-bottom: 14rpx;
					}
					.subway-distance {
						font-size: 22rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #828284;
					}
				}
				.right {
					font-size: 20rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #3299EF;
				}
			}
		}

		
		
		.overview-box {
			padding: 40rpx 36rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.title {
				font-size: 36rpx;
				font-family: FZLTZHK;
				font-weight: normal;
				color: #000000;
				margin-bottom: 41rpx;
			}
			.item-group {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				.item-box {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					width: 50%;
					.icon {
						width: 25rpx;
						height: 27rpx;
						margin-right: 17rpx;
						
					}
					.info {
						width: calc(100% - 42rpx);
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;
						.main {
							font-size: 24rpx;
							font-family: FZLTZHK;
							font-weight: normal;
							color: #000000;
							margin-bottom: 14rpx;
						}
						.sub {
							font-size: 20rpx;
							font-family: FZLTXHK;
							font-weight: normal;
							color: #828284;
						}
					}
				}
			}
			.introduce {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 71rpx;
				.info-box {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					.label {
						font-size: 24rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #000000;
						margin-right: 16rpx;
					}
					
				}
				.show-more {
					font-size: 20rpx;
					font-family: FZLTXHK;
					font-weight: normal;
					color: #000000;
				}
			}
		}
	
		.facilities-box {
			padding: 40rpx 36rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.title-row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 45rpx;
				.title-text {
					font-size: 36rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #000000;
				}
				.show-more {
					font-size: 20rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #000000;
				}
			}
		}
		.comment-box {
			padding: 40rpx 36rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.title-row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 45rpx;
				.title-text {
					font-size: 36rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #000000;
				}
				.show-more {
					font-size: 20rpx;
					font-family: FZLTZHK;
					font-weight: normal;
					color: #000000;
				}
			}
		}
	}
</style>